<template>
  <!-- 轮播图 -->
  <div class="carousel">
    <div class="banner" @mouseover="yesOrNo = false" @mouseleave="yesOrNo = true">
      <div class="item">
        <img :src="imgList[currentIndex]" />
      </div>
      <div class="page" v-if="this.imgList.length > 1">
        <ul>
          <li v-for="(item, index) in imgList" :key="index" @click="gotoPage(index)" :class="{ current: currentIndex == index }">
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'carousel',
  data() {
    return {
      yesOrNo: true,
      imgList: [
        'http://www.zhuyitech.com/static/img/new_banner.0909fe6.png',
        'http://www.zhuyitech.com/static/img/banner_banner02.18a341a.png',
        'http://www.zhuyitech.com/static/img/bg_banner03.3047845.png',
      ],
      currentIndex: 0, //默认显示图片
      timer: null, //定时器
    };
  },
  methods: {
    // 获得key
    gotoPage(index) {
      this.currentIndex = index;
    },
    //定时器
    runInv() {
      this.timer = setInterval(() => {
        if (this.yesOrNo) {
          this.gotoPage(this.nextIndex);
        }
      }, 2500);
    },
  },
  computed: {
    // 需要左右切换标记的时候 自己加上就行
    //上一张
    prevIndex() {
      if (this.currentIndex == 0) {
        return this.imgList.length - 1;
      } else {
        return this.currentIndex - 1;
      }
    },
    //下一张
    nextIndex() {
      if (this.currentIndex == this.imgList.length - 1) {
        return 0;
      } else {
        return this.currentIndex + 1;
      }
    },
  },
  created() {
    this.runInv();
  }
};
</script>

<style lang="scss" scoped>
ul li {
  float: left;
  width: 80px;
  height: 8px;
  text-align: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  background: #F9FBF8;
  opacity: 0.2;
  margin-left: 20px;
}
.banner {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.banner img {
  width: 100%;
  display: block;
}
.banner .page {
  position: absolute;
  right: 43%;
  bottom: 20px;
  width: 100%;
}
.banner .page ul {
  float: right;
}
.current {
  opacity: 1;
}
</style>